<apes-header></apes-header>
<apes-content id="content">
  <apes-card [apesBordered]="false">
    <!-- header -->
    <!--<div class="header-nav">-->
      <!--&lt;!&ndash; header-left &ndash;&gt;-->
      <!--<div class="header-left">-->
        <!--<div class="title">-->
          <!--<p>门店总车流列表</p>-->
        <!--</div>-->
        <!--<div class="xzk">-->
          <!--<apes-date-picker style="padding: 10px 5px 10px 25px" (ngModelChange)="startDate=$event; startValueChange()"-->
                            <!--[ngModel]="startDate" apesShowTime [apesFormat]="'yyyy-MM-dd'"-->
                            <!--[apesPlaceHolder]="'起始时间'"></apes-date-picker>-->
          <!--<apes-date-picker style="padding: 10px 5px 10px 5px" (ngModelChange)="endDate=$event; endValueChange()"-->
                            <!--[ngModel]="endDate" apesShowTime [apesFormat]="'yyyy-MM-dd'"-->
                            <!--[apesPlaceHolder]="'结束时间'"></apes-date-picker>-->
        <!--</div>-->
        <!--<div>-->
          <!--<button apes-button [apesSize]="'large'" (click)="submit()"> 确认</button>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

    <div class="header-nav">
      <!-- header-left -->
      <div class="header-left">
        <div class="title" apes-col apesSpan="3">
          <p>门店总车流列表</p>
        </div>
        <div apes-col apesSpan="1">
          <button apes-button [apesSize]="'default'" (click)="submit()"> 确认</button>
        </div>
        <div  apes-col apesSpan="8">
          <span>日期：</span>
          <apes-date-picker (ngModelChange)="startDate=$event; startValueChange()" [ngModel]="startDate" [apesFormat]="'yyyy-MM-dd'" [apesPlaceHolder]="'起始时间'"></apes-date-picker>
          <apes-date-picker style="padding: 0px 5px 0px 5px" (ngModelChange)="endDate=$event; endValueChange()" [ngModel]="endDate" [apesFormat]="'yyyy-MM-dd'" [apesPlaceHolder]="'结束时间'"></apes-date-picker>
        </div>
        <div apes-col apesSpan="8">
          <span>公司：</span>
          <ng-select style="width: 240px; display: inline-block;"
                     typeToSearchText
                     [items]="companyData"
                     multiple="true"
                     bindLabel="name"
                     bindValue="id"
                     placeholder="选填，可多选"
                     [(ngModel)]="companyList"
                     [notFoundText]="'无法找到'">
          </ng-select>
        </div>
      </div>
    </div>

    <!-- shujuxianhsi -->
    <div apes-row apesGutter="16">
      <div apes-col nzXs="24" apesMd="8">
        <!-- 饼图  到店车流-->
        <apes-card [apesBordered]="false" apesTitle="" [apesBodyStyle]="{'padding.px': 24}" class="sales-card"
                   style="min-height: 200px;">

          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [data]="salesPieData"
                    [valueFormat]="">
          </apes-pie>

        </apes-card>
      </div>
      <div apes-col nzXs="24" apesMd="8">
        <!-- 饼图  会员-->
        <apes-card [apesBordered]="false" apesTitle="" [apesBodyStyle]="{'padding.px': 24}" class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [data]="vipPieData" [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>
      <div apes-col nzXs="24" apesMd="8">
        <!-- 饼图  微信-->
        <apes-card [apesBordered]="false" apesTitle="" [apesBodyStyle]="{'padding.px': 24}" class="sales-card"
                   style="min-height: 200px;">

          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [data]="wechatPieData"
                    [valueFormat]="">
          </apes-pie>

        </apes-card>
      </div>
    </div>

    <!-- table -->
    <div>
      <ag-grid-angular #grid
                       style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                       enableColResize="true"
                       enableSorting="true"
                       enableFilter="true"

                       suppressLoadingOverlay="true"

                       [rowData]="rowData"
                       [gridOptions]="gridOptions"
                       [columnDefs]="columnDefs"
                       [pinnedBottomRowData]="pinnedBottomRowData">
      </ag-grid-angular>
    </div>

  </apes-card>
</apes-content>
